<template>
	<view>
		<Tabbar :pageIndex="1"></Tabbar>
		<!-- 头部 -->
		<view class="header">
			<!-- 头像，个人信息 -->
			<view class="container">
				<view class="list-item">
					<!-- 显示圆形头像 -->
					<view class="avatar-wrapper">
						<image class="avatar" src="/static/imageTest.jpg" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title">张三</view>
						<view class="note">17324999833</view>
					</view>
					<view class="status">
						<uni-icons @click="installPage" type="gear-filled" color="#fff" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="youhui">
			<button @click="goToCouponsPage" class="coupon-button">
				<text class="con">优惠券</text>
				<text class="num">3张</text>
			</button>
		</view>
		<view class="card">
			<view class="card-header" @click="myOrderPage">
				<text class="my">我的订单</text>
				<text class="extra">全部订单></text>
			</view>
			<view class="card-body">
				<view class="item" @click="payOrder">
					<image class="icon" src="/static/myOrder/daizhifu.png" />
					<text class="caption">待支付</text>
				</view>
				<view class="item" @click="useOrder">
					<image class="icon" src="/static/myOrder/daishiyong.png" />
					<text class="caption">待使用</text>
				</view>
				<view class="item" @click="sayOrder">
					<image class="icon" src="/static/myOrder/daipingjia.png" />
					<text class="caption">待评价</text>
				</view>
			</view>
		</view>
		<view>
			<uni-section title="我的服务" type="line" padding>
				<view class="grid-container">
					<view class="grid-item" v-for="(item, index) in items" :key="index"
						@click="navigateToPage(item.text)">
						<view class="grid-item-box">
							<image :src="item.icon" mode="aspectFit" class="icon1" />
							<text class="text">{{ item.text }}</text>
						</view>
					</view>
				</view>
			</uni-section>
		</view>
		<!-- 弹窗 -->
		
		<!-- 分享示例 -->
		<view>
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share></uni-popup-share>
			</uni-popup>
		</view>
		
		<view class="logout-button" @click="goToLogoutPage">退出登录</view>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar/tabbar.vue'; // 或者根据实际路径引入组件
	export default {
		onReady() {
			// 通过 uni.setNavigationBarColor() 修改导航栏颜色
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#5290FF'
			});
		},
		components: {
			Tabbar
		},
		data() {
			return {
				dynamicList: [],
				items: [{
						icon: '/static/myService/lingquan.png',
						text: '领券中心'
					},
					{
						icon: '/static/myService/friend.png',
						text: '邀请好友'
					},
					{
						icon: '/static/myService/myCar.png',
						text: '我的车辆'
					},
					{
						icon: '/static/myService/payContent.png',
						text: '消费记录'
					},
					{
						icon: '/static/myService/yingji.png',
						text: '我的维修'
					},
					{
						icon: '/static/myService/yijian.png',
						text: '意见反馈'
					},
					{
						icon: '/static/实名认证.png',
						text: '实名认证'
					},
					{
						icon: '/static/myService/shouhuodizhi.png',
						text: '收货地址'
					}
				]
			}
		},
		methods: {
			// 统计优惠卷数量
			countCoupons() {
				// 这里应该调用接口获取优惠卷数量
			},
			//设置
			installPage() {
				console.log("111")
				uni.navigateTo({
					url: '/pages/my/set/set' // 替换为你要跳转的页面路径
				});
			},
			//退出登录
			goToLogoutPage() {
				uni.navigateTo({
					url: '/pages/login/login' // 替换为你的退出登录页面路径
				});
			},
			//优惠券
			goToCouponsPage() {
				// 使用 uni.navigateTo 跳转到优惠券页面
				uni.navigateTo({
					url: '/pages/my/myCoupons/myCoupons' // 确保路径与实际页面路径一致
				});
			},
			//我的订单
			myOrderPage() {
				// 使用 uni.navigateTo 跳转到优惠券页面
				uni.navigateTo({
					url: '/pages/my/myOrder/myOrder' // 确保路径与实际页面路径一致
				});
			},
			// 待支付
			payOrder() {
				uni.navigateTo({
					url: '/pages/my/myOrder/myOrder?tab=pay' // 通过 tab 参数传递目标标签
				});
			},
			// 待使用
			useOrder() {
				uni.navigateTo({
					url: '/pages/my/myOrder/myOrder?tab=use' // 通过 tab 参数传递目标标签
				});
			},
			// 待评价
			sayOrder() {
				uni.navigateTo({
					url: '/pages/my/myOrder/myOrder?tab=say' // 通过 tab 参数传递目标标签
				});
			},
			//宫格页面跳转
			navigateToPage(text) {
				switch (text) {
					case '领券中心':
						uni.navigateTo({
							url: '/pages/my/myCoupons/rollCollarCenter'
						});
						break;
					case '邀请好友':
						uni.navigateTo({
							url: ''
						});
						break;
					case '我的车辆':
						uni.navigateTo({
							url: '/pages/my/myVehicle/myVehicle'
						});
						break;
					case '消费记录':
						uni.navigateTo({
							url: '/pages/my/myPurchaseHistory/myPurchaseHistory'
						});
						break;
					case '我的维修':
						uni.navigateTo({
							url: '/pages/my/myRepair/myRepair'
						});
						break;
					case '意见反馈':
						uni.navigateTo({
							url: '/pages/my/myAdvice/myAdvice'
						});
						break;
					case '实名认证':
						uni.navigateTo({
							url: '/pages/my/myIdVer/myIdVer'
						});
						break;
					case '收货地址':
						uni.navigateTo({
							url: ''
						});
						break;
				}
			}
		},

	}
</script>

<style>
	page{
		background-color: #fff;
	}
	.header {
		position: relative;
		/* 使优惠券按钮可以相对于 header 定位 */
		height: 100px;
		background-color: #5290FF;
		margin-top: -60px;
	}

	/* 头像，电话姓名格式 */
	.container {
		padding: 10px;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.avatar-wrapper {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		overflow: hidden;
		margin-right: 10px;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 25px;
	}

	.content {
		flex: 1;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #fff;
	}

	.note {
		font-size: 14px;
		color: #fff;
	}

	.status {
		display: flex;
		align-items: center;
	}

	/* 优惠券 */
	.youhui {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 15;
		/* 确保在卡片上方 */
		width: 300px;
		margin-top: -20px;
	}

	.coupon-button {
		background-color: #fff;
		/* 按钮背景色 */
		color: dimgrey;
		/* 按钮文字颜色 */
		padding: 10px 20px;
		border: none;
		border-radius: 10px;
		font-size: 18px;
	}

	.con {
		margin-right: 160px;
	}

	/* 我的订单 */
	.card {
		margin-left: 10px;
		margin-right: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
		background-color: #fff;
		position: relative;
		margin-top: 50px;
		/* 调整卡片与优惠券按钮的距离 */
	}

	.card-header {
		padding: 16px;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.my {
		font-size: 16px;
	}

	.extra {
		font-size: 14px;
	}

	.card-body {
		display: flex;
		justify-content: space-around;
		padding: 16px;
	}

	.item {
		text-align: center;
		display: flex;
		flex-direction: column;
		/* 垂直方向布局 */
		align-items: center;
		/* 水平方向居中对齐 */
	}

	.icon {
		width: 28px;
		height: 28px;
		object-fit: cover;
	}

	.caption {
		margin-top: 8px;
		font-size: 7px;
	}

	/* 我的服务宫格 */
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		margin: -1px;
		/* 用于处理边距对齐问题 */
	}

	.grid-item {
		width: 25%;
		/* 4列布局 */
		box-sizing: border-box;
		padding: 0px;
	}

	.grid-item-box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #ddd;
		/* 设定边框颜色 */
		border-right: 1px solid #ddd;
		padding: 10px;
	}

	.icon1 {
		width: 33px;
		height: 33px;
	}

	.text {
		margin-top: 5px;
		color: #777;
	}

	/* 退出登录 */
	.logout-button {
		color: blue;
		/* 设置字体颜色为蓝色 */
		font-size: 16px;
		/* 设置字体大小 */
		text-align: center;
		/* 使文本居中 */
		padding: 10px;
		/* 添加内边距以增加点击区域 */
		position: absolute;
		bottom: 70px;
		/* 距离底部 20px，可以根据需求调整 */
		width: 100%;
		/* 宽度设置为 100% */
	}
</style>